<!--
 * @Author: hua
 * @Date: 2020-07-21 14:20:36
 * @description: 
 * @LastEditors: hua
 * @LastEditTime: 2020-07-23 16:48:13
--> 
<template>
  <div class="dashboard-container">
    <!-- COM -->
    <el-select v-model="com" placeholder="请选择COM口:">
      <el-option
        v-for="(item,index) in portList"
        :key="index"
        :label="item.comName"
        :value="item.comName"
      ></el-option>
    </el-select>
    <el-button type="primary" @click="connect(com)">连接</el-button>
    <h2>IMEI</h2>
    <el-input v-model="imei" placeholder="请输入imei"></el-input>
    <el-input style="margin-top:10px" v-model="time" placeholder="定时循环秒数"></el-input>
    <el-button style="margin-top:10px" type="primary" @click="handleQG">发送QG</el-button>
    <el-button style="margin-top:10px" type="danger" @click="handleCancel">终止循环</el-button>
    <div style="margin: 20px 0;"></div>
    <el-input type="textarea" placeholder="请输入发送内容" v-model="inputValue" maxlength="30"></el-input>
    <el-button style="margin-top:10px" type="primary" @click="handleMsg">发送信息</el-button>
    <h2>返回信息</h2>
    <div
      style="overflow:auto;padding:20px;height:500px;border:1px solid #C0C4CC;border-radius:5px;"
      v-html="outputValue"
    ></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Message, MessageBox } from "element-ui";
import { sendCommand } from "@/api/lock";
export default {
  name: "dashboard",
  data() {
    return {
      productionBatch: {
        creationDate: "",
        lastModifiedDate: null,
        id: 0,
        batchName: "",
        batchNumber: "",
        startDate: "",
        endDate: "",
        enable: 0,
      },
      portList: [],
      com: "",
      inputValue: "",
      outputValue: "",
      imei: "860536048256418",
      time: 25,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    //初始化串口信息
    window.serialport = require("serialport");
    window.port = null;
    window.comName = null;
    window.cardData = { card: "", cardData: "" };
    let rel = serialport.list();
    rel.then(
      (ports) => {
        console.log("成功，串口列表为data:", ports);
        this.portList = ports;
        if (window.localStorage.getItem("com")) {
          window.comName = window.localStorage.getItem("com");
          this.com = window.localStorage.getItem("com");
        }
      },
      (error) => {
        console.log("失败err:", error);
      }
    );
    //存在就直接连接
    if (window.localStorage.getItem("com")) {
      window.comName = window.localStorage.getItem("com");
      this.connect(window.comName);
    }
  },
  methods: {
    connect(comName) {
      let that = this;
      let lock = false;
      window.localStorage.setItem("com", comName);
      if (port) {
        port.close();
      }
      port = new serialport(comName, {
        baudRate: parseInt(115200),
        dataBits: 8, //数据位
        parity: "none", //奇偶校验
        stopBits: 1, //停止位
        flowControl: false,
      });
      //监听打开数据
      port.on("open", (data) => {
        alert("串口已连接");
      });
      port.on("error", (data) => {
        console.log(data.toString());
        if (data.toString().indexOf("Port") == -1) {
          alert(data);
        }
      });
      //监听返回数据
      port.on("data", (data) => {
        //收hex
        console.log("recv: " + data.toString("hex"));

        that.outputValue = `<p>${data.toString()}</p>` + that.outputValue;
        console.log("recv: " + data);
        if (data.indexOf("QG") !== -1) {
          clearInterval(window.timeout15);
        }
      });
    },
    handleQG() {
      if (this.time < 25) {
        Message({
          message: "循环秒数不能低于25",
          type: "error",
          duration: 5 * 1000,
        });
        return;
      }
      sendCommand(this.userInfo.id, "QG", this.imei, "LOCK").then((res) => {
        Message({
          message: this.$t("sendSuccess"),
          type: "success",
          duration: 5 * 1000,
        });
        window.setIntervalTime = setInterval(() => {
          this.command();
        }, this.time * 1000);
        window.timeout15 = setTimeout(() => {
          this.handleNotification();
        }, 15000);
      });
    },
    command() {
      sendCommand(this.userInfo.id, "QG", this.imei, "LOCK").then((res) => {
        Message({
          message: this.$t("sendSuccess"),
          type: "success",
          duration: 5 * 1000,
        });

        window.timeout15 = setTimeout(() => {
          this.handleNotification();
        }, 15000);
      });
    },
    handleCancel() {
      clearInterval(window.setIntervalTime);
    },
    handleNotification() {
      clearInterval(window.timeout15);
      const option = {
        title: "提示",
        body: "未收到QG",
        icon: require("@/assets/logo.png"),
      };

      const myNotification = new window.Notification(option.title, option);
      myNotification.onclick = () => {
        console.log("clicked");
      };
      let audio = new Audio();
      audio.src = require("@/assets/music.mp3");
      audio.play();
    },
    handleMsg() {
      port.write("inputValue");
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-container {
  overflow: auto;
  height: 100%;
  padding: 20px;
}
.item {
  line-height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
